<template>
  <view class="message">
			<u-navbar placeholder title="消息私信" :autoBack="true" rightText="设置" @rightClick="isShowmessageSetting = true"/>
    <view class="top">
			<u-cell title="评论和@" label="小温暖 回复了你" center is-link>
				<a slot="icon" class="img-comment"></a>
			</u-cell>
			<u-cell title="点赞" label="你的maya 点赞了你的视频" center is-link>
				<a slot="icon" class="img-like"></a>
			</u-cell>
			<u-cell title="粉丝" label="小温暖 关注了你" center is-link>
				<a slot="icon" class="img-fans"></a>
			</u-cell>
    </view>
    <view class="bottom">
			<u-cell title="创作通知" label="邀请您参加热门话题讨论，快来看看吧" center >
				<a slot="icon" class="img-creation-message"></a>
				<view class="" slot="value">
					<text>11:11</text>
					<u-badge type="error" max="99" value="100"></u-badge>
				</view>
			</u-cell>
			<u-cell title="系统通知" label="【举报通知 】亲爱的用户你好，经核实您举报的" center >
				<a slot="icon" class="img-system-message"></a>
				<view class="" slot="value">
					<text>11:11</text>
					<u-badge type="error" max="99" value="100"></u-badge>
				</view>
			</u-cell>
			<u-cell title="陌生人消息" label="你是个大可爱是打算发叔叔把咖啡就会崩溃啊大发" center>
				<a slot="icon" class="img-strange-message"></a>
				<view class="" slot="value">
					<text>11:11</text>
					<u-badge type="error" max="99" value="100"></u-badge>
				</view>
			</u-cell>
    </view>


		<u-popup :show="isShowmessageSetting" mode="right" @close="isShowmessageSetting = false" @open="isShowmessageSetting = true" >
				<Setting @close="isShowmessageSetting=false"/>
		</u-popup>
		
  </view>
</template>

<script>
import messageSetting from '@/pages/setting/message/index.vue'
export default {
  name: 'message',
  components: {
    Setting: messageSetting
  },
  data () {
    return {
      isShowmessageSetting: false
    }
  },
  created () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
	.message{
		background-color: #eeeeee;
	}
.top,.bottom{
	margin-top: 5px;
  background-color: #fff;
	a{
		width: 45px;
		height: 45px;
	}
}
.img-comment{
    background: url(~@/static/img/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px 0px;
   }
    .img-like{
    background: url(~@/static/img/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px -67px;
   }
    .img-fans{
    text-indent: -1000px;
    background: url(~@/static/img/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:0px -134px;
   }
    .img-creation-message{
    text-indent: -1000px;
    background: url(~@/static/img/jlt.png) no-repeat;
    background-size:45px 385px;
    background-position:-1px -206px;
   }
	 .img-system-message{
	  text-indent: -1000px;
	  background: url(~@/static/img/jlt.png) no-repeat;
	  background-size:45px 385px;
	  background-position:-1px -273px;
	 }
	  .img-strange-message{
	  text-indent: -1000px;
	  background: url(~@/static/img/jlt.png) no-repeat;
	  background-size:45px 385px;
	  background-position:-1px -341px;
	 }
	 
</style>
